<template>
  <div class="control-group">
    <div>名称： <el-input v-model="name" style="width: 300px;" placeholder="请输入名称"  ></el-input></div>
    <div style="margin-top: 10px;">
      功能配置：
      <div class="sensor-list">
      <div :class="['sensor-item',['control_ratio','time_interval','display_time_switch'].includes(item.displayModel)?'middle':'']" 
        v-for="(item,index) in sensorList" :key="item.id">
          <div class="item-info">
            <div class="item-icon">
              <img :src="item.icon?getSensorIcon(item.icon):''" style="width: 100%;height: 100%;" alt="">
            </div>
            <div class="item-msg">
              <div>
                <div>{{ item.name }}</div>
                <div style="font-size: 10px;">{{ item.updateTime }}</div>
              </div>
            </div>
          </div>
          <div class="item-value">
            <div v-if="item.displayModel==='time_interval'" @click.stop>
              <el-time-picker
                is-range
                v-model="controllerMap[item.sensorId]"
                value-format="HH:mm:ss"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </div>
            <div v-if="item.displayModel==='control_ratio'" @click.stop>
              <el-button size="small" slot="reference" 
              v-for="sub in item.commandList"
              :key="sub.id"
              :class="[sub.value===controllerMap[item.sensorId]?'active-btn':'']" 
              @click="selectRadio(item,sub.value)"
              >{{ sub.name }}</el-button>
            </div>
            <div v-if="item.displayModel==='control_btn'" @click.stop>
              
            </div>
            <div v-if="item.displayModel==='control_slider'" @click.stop>
              <el-input-number v-model="controllerMap[item.sensorId]" style="width: 150px;" :min="parseInt(item.valueStart)" :max="parseInt(item.valueEnd)"  controls-position="right" ></el-input-number >
              <!-- <el-button size="small"  class="active-btn"  >确定</el-button> -->
            </div>
            <div v-if="item.displayModel==='custom_btn'" @click.stop>
              <el-input v-model="controllerMap[item.sensorId]" style="width: 150px;"  ></el-input>
              <!-- <el-button size="small"  class="active-btn"  >确定</el-button> -->
            </div>
            <div v-if="item.displayModel==='display_time_switch'" @click.stop>
              <el-time-picker
                  :disabled = "item.running"
                  v-model="controllerMap['time'+item.sensorId]"
                  :default-value="new Date(0, 0, 0, 0, 0, 10)"
                  placeholder="运行时长">
                </el-time-picker>
                <el-button 
                style="margin-left: 10px;"
                v-for="sub in item.commandList"  
                :key="sub.id" size="small" slot="reference" 
                :class="[sub.value===controllerMap[item.sensorId]?'active-btn':'']"  
                @click="selectRadio(item,sub.value)"
                >{{ sub.name }}</el-button>
            </div>
          </div>
          <div class="item-desc">
            <span></span>
            <span style="float: right;"></span>
          </div>
          <i class="el-icon-close" style="position: absolute;top: 10px;right: 10px;" @click="delSensor(index)" ></i>
        </div>
      <div class="add-btn" @click="seriesIoOpen=true" >
        <i class="el-icon-plus"></i>
      </div>
    </div>
    </div>
    <div style="text-align: right;margin-top: 10px;" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
    <!-- io列表选择 -->
    <el-dialog title="串口IO" :visible.sync="seriesIoOpen" width="1000px" append-to-body>
      <el-table ref="multipleTable" :data="seriesIoList" height="500" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="显示图标" align="center" prop="icon" width="100">
          <template slot-scope="scope">
            <el-image style="width: 40px; height: 40px" :src="getSensorIcon(scope.row.icon)" fit="contain"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="串口名称" align="center" prop="name" />
        <el-table-column label="串口标识" align="center" prop="flag" />
        <el-table-column label="控制类型" align="center" prop="flag" >
          <template slot-scope="scope">
            {{ controlList[scope.row.control]}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :style="{'color':selection.findIndex(i=>i.id===scope.row.id)>=0?'#aaa':''}"
              @click="toggleSelection(scope.row)"
            >{{selection.findIndex(i=>i.id===scope.row.id)>=0?'取消选择':'选择'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSelect">确 定</el-button>
        <el-button @click="seriesIoOpen=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createMergeControl,updateMergeControl} from "@/api/device/device";
export default{
  name:'controlGroup',
  props:{
    dataItem:{},
    device:{}
  },
  data(){
    return{
      seriesIoList:[],
      seriesIoOpen:false,
      controlList:{
        "0":"输入",
        "1":"输出",
        "2":"显示"
      },
      name:'',
      controllerMap:{},
      selection:[],
      sensorList:[]
    }
  },
  computed:{

  },
  created(){
    this.device.sensorList.forEach(el=>{
      if(el.sensorType=='1'){
        this.seriesIoList.push(el)
      }
    })
    if(this.dataItem.name){
      this.name = this.dataItem.name;
      let arr = []
      this.dataItem.mergeSensorVos.forEach(el=>{
        arr.push(el.sensorVo)
      })
      this.sensorList = arr
      this.dataItem.mergeSensorVos.forEach(el=>{
        if(el.flagValue&&typeof(el.flagValue)==='string'){
          let params = JSON.parse(el.flagValue)
          if(params.value1&&!params.value2){
            this.$set(this.controllerMap,el.sensorId,params.value1)
          }else if(params.value1&&params.value2){
            this.$set(this.controllerMap,el.sensorId,[params.value1,params.value2])
          }
        }
      })
    }else{
      setTimeout(()=>{
        this.seriesIoOpen = true
      },0)
    }
  },
  methods:{
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    toggleSelection(rows) {
      this.$refs.multipleTable.toggleRowSelection(rows);
    },
    handleSelect(){
      this.sensorList = JSON.parse(JSON.stringify(this.selection))
      console.log(this.sensorList)
      this.seriesIoOpen = false;
    },
    selectRadio(item,value){
      this.$set(this.controllerMap,item.sensorId,value)
    },
    delSensor(index){
      this.sensorList.splice(index,1)
    },
    handleSubmit(){
      if(!this.name){
        this.$message.error('请输入名称')
        return
      }
      if(this.sensorList.length<=0){
        this.$message.error('请选择功能配置')
        return
      }
      for(let i = 0;i<this.sensorList.length;i++){
        let item = this.sensorList[i]
        let params = {}
        if('time_interval'===item.displayModel){
          if(this.controllerMap[item.sensorId]&&this.controllerMap[item.sensorId].length===2){
            params.value1 = this.controllerMap[item.sensorId][0]
            params.value2 = this.controllerMap[item.sensorId][1]
          }
        }else if(['control_ratio','control_slider','custom_btn'].includes(item.displayModel)){
          params.value1 = this.controllerMap[item.sensorId]
        }else if('display_time_switch'===item.displayModel){
          console.log(this.controllerMap['time'+item.sensorId])
          if(this.controllerMap['time'+item.sensorId]){
            params.time = this.parseTime(this.controllerMap['time'+item.sensorId]).substring(11,19)
          }
          params.value1 = this.controllerMap[item.sensorId]
        }
        item.flagValue = JSON.stringify(params)
      }
      for(let i = 0;i<this.sensorList.length;i++){
        let item = this.sensorList[i]
        if(['time_interval','control_ratio','control_slider','custom_btn'].includes(item.displayModel)&&item.flagValue==='{}'){
          this.$message.error('"'+item.name+'"不能为空')
          return
        }else if('display_time_switch'===item.displayModel){
          let param = JSON.parse(item.flagValue)
          if(!param.value1||!param.time){
            this.$message.error('"'+item.name+'"不能为空')
            return
          }
        }
      }
      let data = {
        name:this.name,
        deviceId:this.device.id,
        sensorList:[]
      }
      for (let i = 0; i < this.sensorList.length; i++) {
        let item = this.sensorList[i]
        data.sensorList.push({
          "flagValue": item.flagValue,
          "sensorId": item.sensorId
        })
      }
      if(this.dataItem.id){
        data.id = this.dataItem.id;
        updateMergeControl(data).then(res=>{
          this.$emit('success')
        })
      }else{
        createMergeControl(data).then(res=>{
          this.$emit('success')
        })
      }

    },
    handleCancel(){
      console.log('cancel')
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped >
.control-group{
  width: 100%;
  .sensor-list{
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    .add-btn{
      margin: 5px 0.5%;
      border: 1px solid #ccc;
      border-radius: 5px;
      display: inline-flex;
      width: 110px;
      height: 110px;
      align-items: center;
      justify-content: center;
      font-size: 45px;
      color: #ccc;
      cursor: pointer;
    }
    .sensor-item{
      position:relative;
      width: 32%;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      height: 110px;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      margin: 5px 0.5%;
      .alarm-icon{
        width: 15px;
        height: 15px;
        position: absolute;
        fill:currentColor;
        color:rgb(243, 56, 56);
        font-size: 20px;
        right: 10px;
        top: 5px;
      }
      &.add{
        width: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 45px;
        color: #ccc;
      }
      &.small{
        width: 48.5%;
      }
      &.middle{
        width: 65%;
      }
      &.big{
        width: 100%;
      }
      &:hover{
        background-color: #f5f7fa;
      }
      .item-info{
        display: flex;
        flex-wrap: nowrap;
        .item-icon{
          flex: 0 0 auto;
          width: 30px;
          height: 30px;
        }
        .item-msg{  
          padding-left: 10px;
          font-size: 14px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .tips{
          line-height: 30px;
          margin-left: 5px;
          color: #ccc;
          font-size: 20px;
        }
      }
      .item-value{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
        height: 40px;
        color: #03C2C2;
        font-weight: 500;
        .active-btn{
          background-color: #03C2C2;
          color: #fff;
        }
        .tips{
          margin-left: 5px;
          color: #ccc;
          font-size: 20px;
        }
      }
      .item-desc{
        font-size: 12px;
        line-height: 20px;
      }
    }
  }
}

</style>